import { Component, OnInit, ViewChild } from '@angular/core';
import { Banner, HotTag, SongSheet } from '@app/models';
import { HomeService } from '@app/services/home-service.service';
import { NzCarouselComponent } from 'ng-zorro-antd/carousel';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.less'],
})
export class HomeComponent implements OnInit {
  constructor(private homeServer: HomeService) {}

  @ViewChild(NzCarouselComponent, { static: true })
  private nzCarousel!: NzCarouselComponent;
  banners: Banner[] = [];
  tags: HotTag[] = [];
  sheetList: SongSheet[] = [];
  carouselActiveIndex: number = 0;

  ngOnInit(): void {
    this.getBanners();
    this.getHotags();
    this.getPersonalSheetList();
  }

  getBanners() {
    this.homeServer.getBanners().subscribe((banners) => {
      this.banners = banners;
    });
  }
  getHotags() {
    this.homeServer.getHotTags().subscribe((tags) => {
      this.tags = tags;
    });
  }
  getPersonalSheetList() {
    this.homeServer.getPersonalSheetList().subscribe((result) => {
      this.sheetList = result;
    });
  }

  onBeforeChange({ to }: any) {
    this.carouselActiveIndex = to;
  }

  changeSlide(type: 'pre' | 'next') {
    this.nzCarousel[type]();
  }

  trackFn = (index: number, item: any) => {
    return index;
  };
}
